import BaseVue from '@/lib/base/BaseVue';
import Component from 'vue-class-component';
import styles from './Notice.module.less';
import { Prop } from 'vue-property-decorator';
let i = 0;
@Component
export default class extends BaseVue {
    // 可移动距离
    private totalWidth = 0;

    // 两次文字跑动间隔时间 
    @Prop({
        default: 0
    })
    private interval!: number;

    private get firstStyle() {
        return {
            transition: this.totalWidth ? 'transform 5s linear' : 'none',
            webkitTransition: this.totalWidth ? 'transform 5s linear' : 'none',
            transform: ` translate3D(-${this.totalWidth ? this.totalWidth : 0}px,0,0)`,
            webkitTransform: ` translate3D(-${this.totalWidth ? this.totalWidth : 0}px,0,0)`
        }
    }

    public render() {
        return (
            <div class={styles.app}>
                <span style={this.firstStyle} ref="content" class={styles.content} onWebkitTransitionEnd={() => {
                    const w = this.totalWidth;
                    this.totalWidth = 0;
                    setTimeout(() => {
                        this.totalWidth = w;
                    }, this.interval);
                }}>{this.$slots.default}</span>
            </div>
        )
    }


    public mounted() {
        this.$nextTick(() => {
            const app = this.$el as HTMLElement;
            const content = this.$refs.content as HTMLElement;
            this.totalWidth = app.offsetWidth + content.offsetWidth;
        });
    }


}
